import React from 'react';
import { Card, Tag, Space, Button, Tooltip, Badge } from 'antd';
import {
  EditOutlined,
  DeleteOutlined,
  CopyOutlined,
  StarOutlined,
  StarFilled,
  EyeOutlined,
  FireOutlined,
  ClockCircleOutlined
} from '@ant-design/icons';
import './style.css';

interface TemplateCardProps {
  template: any;
  isFavorite?: boolean;
  onUse: () => void;
  onEdit?: () => void;
  onDelete?: () => void;
  onToggleFavorite?: () => void;
  onPreview?: () => void;
}

const CATEGORY_COLORS: Record<string, string> = {
  news: '#1890ff',
  product: '#52c41a',
  tech: '#722ed1',
  email: '#fa8c16',
  social: '#eb2f96',
  blog: '#13c2c2',
  marketing: '#f5222d',
  academic: '#1890ff',
  creative: '#fa541c',
  business: '#2f54eb'
};

const CATEGORY_NAMES: Record<string, string> = {
  news: '新闻报道',
  product: '产品描述',
  tech: '技术文档',
  email: '邮件模板',
  social: '社交媒体',
  blog: '博客文章',
  marketing: '营销文案',
  academic: '学术论文',
  creative: '创意写作',
  business: '商务文档'
};

const TemplateCard: React.FC<TemplateCardProps> = ({
  template,
  isFavorite = false,
  onUse,
  onEdit,
  onDelete,
  onToggleFavorite,
  onPreview
}) => {
  const isPopular = template.usageCount > 100;
  const isRecent = template.lastUsedAt && 
    (Date.now() - new Date(template.lastUsedAt).getTime()) < 7 * 24 * 60 * 60 * 1000;

  return (
    <Badge.Ribbon 
      text={isPopular ? '热门' : isRecent ? '最近' : null}
      color={isPopular ? 'red' : 'blue'}
      style={{ display: isPopular || isRecent ? 'block' : 'none' }}
    >
      <Card
        className="template-card"
        hoverable
        size="small"
        title={
          <div className="template-card-title">
            <span className="template-name">{template.name}</span>
            {isFavorite && (
              <StarFilled style={{ color: '#faad14', marginLeft: 8 }} />
            )}
          </div>
        }
        extra={
          <Tag color={CATEGORY_COLORS[template.category] || 'default'}>
            {CATEGORY_NAMES[template.category] || template.category}
          </Tag>
        }
        actions={[
          <Tooltip title="使用模板">
            <Button
              type="text"
              icon={<CopyOutlined />}
              onClick={onUse}
            >
              使用
            </Button>
          </Tooltip>,
          onEdit && (
            <Tooltip title="编辑">
              <Button
                type="text"
                icon={<EditOutlined />}
                onClick={onEdit}
              />
            </Tooltip>
          ),
          onToggleFavorite && (
            <Tooltip title={isFavorite ? '取消收藏' : '收藏'}>
              <Button
                type="text"
                icon={isFavorite ? <StarFilled /> : <StarOutlined />}
                onClick={onToggleFavorite}
              />
            </Tooltip>
          ),
          onPreview && (
            <Tooltip title="预览">
              <Button
                type="text"
                icon={<EyeOutlined />}
                onClick={onPreview}
              />
            </Tooltip>
          )
        ].filter(Boolean)}
      >
        <div className="template-card-content">
          <p className="template-description">
            {template.description || '暂无描述'}
          </p>
          
          {template.variables && template.variables.length > 0 && (
            <div className="template-variables">
              <Space size={4} wrap>
                {template.variables.slice(0, 3).map((variable: any, index: number) => (
                  <Tag key={index} color="blue">
                    {`{${variable.name || variable}}`}
                  </Tag>
                ))}
                {template.variables.length > 3 && (
                  <Tag>+{template.variables.length - 3}</Tag>
                )}
              </Space>
            </div>
          )}
          
          <div className="template-stats">
            <Space>
              {template.usageCount > 0 && (
                <span className="stat-item">
                  <FireOutlined style={{ color: '#ff4d4f' }} />
                  {' '}{template.usageCount} 次使用
                </span>
              )}
              {template.createdAt && (
                <span className="stat-item">
                  <ClockCircleOutlined />
                  {' '}{new Date(template.createdAt).toLocaleDateString()}
                </span>
              )}
            </Space>
          </div>
        </div>
      </Card>
    </Badge.Ribbon>
  );
};

export default TemplateCard;